<template>
	<view class="login">
		<view class="login-title">
			<view>
				<view class="icon-back"  @click="backTousers">
					<!-- <uni-icons type="left" size="30" @click="backTousers"></uni-icons> -->
					<tobackVue :ref="backUsers"></tobackVue>
				</view>
				<view class="bg-title">
					新岩景观艺术
				</view>
				<view class="bg-title">
					智慧平台
				</view>
				<view class="sub-title">
					<view>
						欢迎加入我们
					</view>
					<view>
						一起创造智能世界
					</view>
				</view>

			</view>
		</view>
		<view class="login-content">
			<view class="login-username">
				<!-- <uni-icons type="contact" size="30"></uni-icons> -->
				<view class="from-name">账号</view>
				<input type="text" placeholder="请输入您的邮箱或手机号" maxlength="30"  v-model="phone">
			</view>
			<view class="login-password">
				<view class="from-name">密码</view>
				<!-- <uni-icons type="locked" size="30"></uni-icons> -->
				<view class="from-pwd">
					<input type="safe-password" :password="isp" name="" id="" placeholder="请输入您的密码" maxlength="20" v-model="password">
					<uni-icons color="#ea5541" class="icon-pwd" @click="changeEyeHandler" id="eye-id"
						:type="eyeList[eyeIndex]" size="30"></uni-icons>
				</view>
			</view>
			<view class="login-remenber">
				<view class="login-remenber-check">
					<checkbox-group @change="checkRemenberMe">
						<label>
							<checkbox style="transform: scale(0.8);" value="cb" checked="true" />记住我
						</label>
					</checkbox-group>
				</view>
				<view class="login-remenber-pwd">
					<text @click="gotoFindPwd" class="underline-text">忘记密码?</text>
				</view>
			</view>
		</view>
		<view class="button"><button @click="login" >登录</button></view>
		<view class="login-other">
			<view class="login-other-item1">
				<image src="/static/login_phone.png" ></image>
			</view>
			<view class="login-other-item2">
				<image src="/static/login_wx.png" ></image>
			</view>
		</view>
		<view class="login-botton">
			<view class="login-password">还没有账号？</view>
			<view class="login-zhuce" @click="Registration">注册账号</view>
		</view>
	</view>
</template>

<script>
	import api from "../../api/api.js";
	import tobackVue from "../../componets/toback/toback.vue";
	export default {
		navigationBarTitleText: '',
		navigationStyle: 'custom',
		data() {
			return {
				isp: true,
				phone: '',
				password: '',
				rules: {
					phone: [{
						required: true,
						message: '请输入手机号',
						rule: '/^1[23456789]\d{9}$/'
					}],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}]
				},
				eyeList: ["eye-slash", "eye"],
				eyeIndex: 0,
				remenberMe:0,
				backUsers:'backUsers',
				hostList:[]
			};
		},
		components:{
			tobackVue
		},
		methods: {
			// 记住我
			checkRemenberMe(e){
				// console.log(e.detail.value.length);
				this.remenberMe = e.detail.value.length;
			},
			gotoFindPwd(){
				uni.navigateTo({
					url:"/pages/findpwd/findpwd"
				})
			},
			// 返回用户中心
			backTousers() {
				this.$refs.backUsers.toBack();
			},
			changeEyeHandler() {
				this.eyeIndex = this.eyeIndex === 0 ? 1 : 0;
				this.isp = this.eyeIndex === 0 ? true : false;
			},
			// ...mapMutations(['user_Login']),
			//登录
			login() {

				if (this.phone == '' || this.password == '') {
					uni.showToast({
						title: "内容不能为空哦！",
						icon: "none"
					})
				} else {
					let data = {
						phone: this.phone,
						password: this.password
					}
					uni.request({
						url: api.base.baseUrl + api.base.login,
						method: 'POST',
						header: api.base.header_json,
						data: data,
						success: res => {
							if (res.data.code === 200) {

								uni.setStorage({
									key: api.base.userInfoHead,
									data: res.header[api.base.userInfoHead],
									success: e =>{
										
										// uni.showToast({
										// 	title: res.data.data.msg,
										// 	icon: 'success',
										// 	mask: true
										// });
										
										uni.showLoading({
											title:'登录成功，正在加载基本数据。。。',
											mask:true
										})
										let timer = setTimeout(() =>{
											this.saveUserbaseInfo();
											// this.getUserHostList();
											// //页面跳转
											// uni.switchTab({
											// 	url: "/pages/index/index"
											// });
											clearTimeout(timer);
											timer = null;
										},1000)
										uni.showLoading({
											title:'正在加载主机数据。。。',
											mask:true
										})
										let timer2 = setTimeout(() =>{
											this.getUserHostList();
											//页面跳转
											uni.switchTab({
												url: "/pages/index/index"
											});
											clearTimeout(timer2);
											timer2 = null;
										},2000)
										
									}
								});
								
							} else {
								uni.showToast({
									title: res.data.msg,
									icon: 'none'
								});
							}
						}
					});
				}
			},
			Registration() {
				uni.navigateTo({
					url: '/pages/register/register'
				});
			},
			findPassword() {
				uni.navigateTo({
					url: "/pages/findpwd/findpwd"
				})

			},
			
			getUserHostList() {
				uni.getStorage({
					key: api.base.userInfo,
					success: key => {
						api.getAllHost(key.data).then(res => {
							
							this.hostList = res.data;
							uni.setStorage({
								data:this.hostList,
								key:api.base.userHostList,
								success() {
									// console.log("保存用户主机信息成功",res)
								}
							})
						})
					}
				})
			},
			// 保存用户基本信息
			saveUserbaseInfo(){
				uni.getStorage({
					key: api.base.userInfoHead,
					success: res => {
						// console.log(res.data)
						api.getUserInfo(res.data).then(res => {
							if (res.data === null) {
								uni.navigateTo({
									url: "/pages/login/login"
								})
							} else {
								this.path = res.data.headUrl;
								this.user = res.data;
								this.head_url = api.base.baseUrl + api.base.getUserHeadImage + "?path=" +
									this.path;
								uni.setStorage({
									key: api.base.userInfo,
									data: this.user,
									// success(){
									// 	console.log("保存用户信息成功")
									// }
								})
							}
						})
					},
					complete: data => {
						if (data.data == '') {
							uni.navigateTo({
								url: "/pages/login/login"
							})
						}
					}
				});
			},
			// loginOther() {
			// 	uni.share({
			// 		provider: "weixin",
			// 		scene: "WXSceneSession",
			// 		type: 1,
			// 		summary: "我正在使用HBuilderX开发uni-app，赶紧跟我一起来体验！",
			// 		success: function(res) {
			// 			console.log("success:" + JSON.stringify(res));
			// 		},
			// 		fail: function(err) {
			// 			console.log("fail:" + JSON.stringify(err));
			// 		}
			// 	});

			// }
		}
	};
</script>

<style lang="scss">
	
	.login {
		background-color: #f8f8f8;
		width: 100%;
		margin: 0px;
		background-size: 100% 100%;
		background-attachment: fixed;
		// height: 1535rpx;
		// opacity: 0.8;
		font-family: '微软雅黑';

		.login-title {
			margin: 0;
			padding: 0;
			background-image: url("@/static/login_bg.png");
			width: 100%;
			height: 300px;
			background-size: 100% 100%; 
			
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			color: #ffffff;
			letter-spacing: 5rpx;
			margin-bottom: 50rpx;
			// border: #000 1px solid;

			.icon-back {
				margin-top: 20rpx;
				margin-left: 10rpx;
			}

			.bg-title {

				font-size: 34px;
				color: #fff;
				line-height: 46px;
				margin-left: 30px;
				font-weight: bold;
			}

			.sub-title {
				font-size: 16px;
				color: #000;
				line-height: 24px;
				margin-left: 30px;
				margin-top: 50px;
			}
		}

		.login-content {

			.login-username {
				display: flex;
				flex-direction: column;

				align-items: left;
				margin: 0 50rpx;
			}

			.login-password {
				display: flex;
				flex-direction: column;
				align-items: left;
				margin: 0 50rpx;
				margin-top: 50rpx;

				.from-pwd {
					position: relative;
					.icon-pwd {
						display: block;
						position: absolute;
						right: 10%;
						top: 15px;
					}
				}
			}
			
			.login-remenber{
				width: 80%;
				display: flex;
				justify-content: space-between;
				margin: 20rpx 50rpx;
				.login-remenber-pwd{
					font-size: 12px;
					color: #ea5541;
					text-decoration: underline #ea5541;
				}
			}
		}

		.button {
			margin-top: 40rpx;
			button {
				margin: 0 50rpx;
				background-color: #ea5541;
				width: 83%;
				height: 56px;
				text-align: center;
				line-height: 56px;
				color: #fff;
				border-radius: 26px;
			}
		}
		
		.login-other{
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			grid-template-rows: 50px;
			.login-other-item1{
				height: 150px;
				display: flex;
				justify-content: right;
				align-items: center;
				image{
					width: 150px;
					height: 150px;
				}
			}
			.login-other-item2{
				height: 150px;
				display: flex;
				justify-content: left;
				align-items: center;
				image{
					width: 150px;
					height: 150px;
				}
			}
		}

		.login-botton {
			font-size: 14px;
			display: flex;
			justify-content: center;
			margin-top: 300rpx;

			.login-password {
				padding: 0 5rpx;
				color: #424242;
			}

			.login-zhuce {
				padding: 0 5rpx;
				color: #ea5541;
			}
		}

	}
	
	input {
		padding: 15rpx;
		height: 60rpx;
		width: 90%;
		border: 1rpx solid #ea5541;
		font-size: 12px;
		line-height: 20px;
		border-radius: 8px;
		color: #a8a8a8;
		background-color: #eee;
	}
	.from-name {
		color: #424242;
		font-weight: bold;
		font-size: 12px;
	}
</style>